<template>
	<a-card
		:class="{
			'app-control-form__group': true,
			[`app-control-form__group__${name}`]: true,
			'app-control-form__group--caption': showCaption,
			[`anchor__${name}`]: enableAnchor,
			[slotClass ? slotClass : '']: true,
		}"
		:bodyStyle="slotStyle"
		:bordered="false"
	>
		<template v-if="showCaption" #title>
			<p class="app-control-form__group__title" :class="labelCssName">
				<template v-if="titleBarCloseMode !== 0">
					<down-circle-outlined
						v-if="showContent"
						@click="handleContentShowStatusChange"
					/>
					<right-circle-outlined
						v-else
						@click="handleContentShowStatusChange"
					/>
				</template>
				<AppIconText :iconClass="iconClass" :imgPath="imgPath" :text="title" />
			</p>
		</template>
		<template v-if="showCaption" #extra>
			<template v-if="uIActionGroup">
				<template v-if="Object.is(uIActionGroup.extractMode, 'ITEMS')">
					<a-dropdown>
						<a class="app-control-form__group__action" @click.prevent>
							{{ uIActionGroup.caption }}
						</a>
						<template #overlay>
							<a-menu @click="handleMenuGroupAction">
								<template v-for="item in uIActionGroup.details">
									<a-menu-item
										v-if="item.visible"
										:key="item.uIActionTag"
										:disabled="item.disabled"
									>
										<AppIconText
											:iconClass="item.showIcon && item.iconClass"
											:imgPath="item.showIcon && item.imgPath"
											:text="item.caption"
										/>
									</a-menu-item>
								</template>
							</a-menu>
						</template>
					</a-dropdown>
				</template>
				<template v-else>
					<span v-for="(item, index) in uIActionGroup.details" :key="index">
						<span v-if="index > 0" class="separator">|</span>
						<AppButton
							v-show="item.visible"
							type="link"
							:disabled="item.disabled"
							@click="(event:MouseEvent)=>handleGroupAction(event, item)"
						>
							<AppIconText
								:iconClass="item.showIcon && item.iconClass"
								:imgPath="item.showIcon && item.imgPath"
								:text="item.showCaption && item.caption"
							/>
						</AppButton>
					</span>
				</template>
			</template>
			<template v-if="showMoreMode == 2 && showMoreItems.length > 0">
				<a class="app-control-form__group__more" @click="doManageContainer">
					{{ manageContainerStatus ? '隐藏字段' : '显示字段' }}
				</a>
			</template>
		</template>
		<AppRow v-if="showContent" :layoutOpts="layoutOpts">
			<slot></slot>
		</AppRow>
	</a-card>
</template>
<script setup lang="ts">
import { Ref, ref } from 'vue';
import { AppRow } from '@/components/common/row';
import { DownCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { IEvent, IParam } from '@/core';
import { formGroupProps } from '../form';
const props = defineProps(formGroupProps);

let manageContainerStatus = ref(true);

interface ComponentEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<ComponentEmit>();

const handleGroupAction = (event: MouseEvent, action: IParam) => {
	emit('component-action', {
		name: props.name,
		action: 'formGroupAction',
		data: {
			event,
			logic: {
				name: props.name,
				actionTag: action.uIActionTag,
				actionDECodeName: action.actionDECodeName,
				predefinedType: action.predefinedType,
			},
		},
	});
};

//  显示内容区
const showContent: Ref<boolean> = ref(
	props.titleBarCloseMode === 2 ? false : true
);

const handleMenuGroupAction = ($event: IParam) => {
	if (props.uIActionGroup && props.uIActionGroup.details?.length > 0) {
		const details = props.uIActionGroup.details;
		const action = details.find((action: IParam) =>
			Object.is(action.uIActionTag, $event.key)
		);
		emit('component-action', {
			name: props.name,
			action: 'formGroupAction',
			data: {
				event: null,
				logic: {
					name: props.name,
					actionTag: action.uIActionTag,
					actionDECodeName: action.actionDECodeName,
					predefinedType: action.predefinedType,
				},
			},
		});
	}
};

//  处理内容显示状态变化
const handleContentShowStatusChange = (event: MouseEvent) => {
	event.stopPropagation();
	showContent.value = !showContent.value;
};

// 操作管理容器
const doManageContainer = (event: MouseEvent) => {
	manageContainerStatus.value = !manageContainerStatus.value;
	emit('component-action', {
		name: props.name,
		action: 'formGroupManage',
		data: manageContainerStatus.value,
	});
};
</script>
